<template>
  <el-button plain @click="toggleMark">
    <template v-if="isFav">
      <svg-icon icon="star-fill" size="16px" style="color: var(--el-menu-active-color)" />
      <span class="label">已收藏</span>
    </template>
    <template v-else>
      <svg-icon icon="star" size="16px" />
      <span class="label">收藏</span>
    </template>
  </el-button>
</template>

<script setup lang="ts">
import {computed, defineEmits} from "vue";
import * as api from "@/api/mark";
import {ElMessage} from "element-plus";
import {useUser} from "@/store/user";
import {storeToRefs} from "pinia";

const emit = defineEmits(['refresh'])
const prop = defineProps({detail: { type: Object, default: () => {}}})
const isFav = computed(() => prop.detail?.isMarked === '01')

const userInfo = storeToRefs(useUser())?.userInfo || {}

async function toggleMark() {
  const caseId = prop.detail?.caseId
  // let user = JSON.parse(sessionStorage.getItem('userInfo')) ? JSON.parse(sessionStorage.getItem('userInfo')) : {}
  const userId = userInfo.value.userId
  let res = await api.saveMarkInfo({ caseId, userId })
  if (res.code === '000') {
    ElMessage.success('操作成功！')
    emit('refresh')
    // this.previewList[this.value].isMarked = this.previewList[this.value].isMarked === '01' ? '00' : '01'
  } else {
    ElMessage.error(res.errMessage)
  }
}
</script>

<style lang="scss" scoped>
.el-button {
  width: 100px;
  height: 40px;
  border-radius: 20px;
  border: 1px solid #DADBDD;
  &:hover {
    border-color: var(--el-menu-active-color);
    .label {
      color: var(--el-menu-active-color);
    }
  }
}
.label {
  color: #1A1A1A;
  margin-left: 4px;
}
</style>